<template>
  <div class="shop">
    <div class="shop-header">
      <div class="shopAddress" @click="$router.push({ name: 'CityCopy' })">
        <img src="../assets/地址.png" alt="">
        <span>&nbsp;{{$route.query.address}}{{getCount}}</span>
        <img src="../assets/下 拉.png" alt="">
      </div>
      <div class="shopSearch">
        <input type="text" @click="shopSearch" placeholder="搜索商家、商品名称">
      </div>
    </div>
    <div class="shopBody">
      <div class="shopOption">
        <div class="shopOption__item">
          <div @click="changeCount" class="shopOption__img" v-for="(item, index) in imgSrc" :key="index">
            <img :src="item.src" alt="">
            <p>{{item.name}}{{getCount}}</p>
          </div>
        </div>
        <div class="shopOption__item">
          <div @click="changeCount" class="shopOption__img" v-for="(item, index) in layer" :key="index">
            <img :src="item.src" alt="">
            <p>{{item.name}}{{getCount}}</p>
          </div>
        </div>
      </div>
      <div class="shopMeal">
        <div class="shopMeal__left">
          <p>品质套餐</p>
          <p>搭配齐全吃得好</p>
          <p>立即抢购 ></p>
        </div>
        <div class="shopMeal__right">
          <img src="../assets/cai.png" alt="">
        </div>
      </div>
      <div class="shopRecommend">
        <span>———</span>&nbsp;&nbsp;&nbsp;
        <p>推荐商家</p>&nbsp;&nbsp;&nbsp;
        <span>———</span>
      </div>
      <div class="shopScreen">
        <p>综合排序</p>
        <p>最近距离</p>
        <p>销量最高</p>
        <p>筛选</p>
      </div>
      <div class="container" ref="wrapper">
        <div>
          <router-link tag="div" :to="{ name: 'ShoppingHeader', query: { ShopId: item.id, active: item.activities, text: item.delivery_mode.text, address: item.address, time: item.order_lead_time, order: item.recent_order_num, rating: item.rating, name: item.name, imgPath: item.image_path } }" class="shopCommodity" v-for="(item, index) in commodityArr" :key="index">
            <div class="shopCommodity__left">
              <img :src="imgShopUrl+item.image_path" alt="">
            </div>
            <div class="shopCommodity__right">
              <div class="shopCommity__right--item">
                <div class="shopCommity--item__one">
                  <div class="shopCommodityBrand">品牌</div>
                  <p>&nbsp;{{item.name}}</p>
                </div>
                <div class="shopCommity--item__two">
                  <span>·&nbsp;·&nbsp;·&nbsp;&nbsp;</span>
                </div>
              </div>
              <div class="shopCommity__right--item shopMargin">
                <div class="shopCommity--item__one">
                  <span>❤❤❤❤</span>&nbsp;&nbsp;
                  <p class="month">{{item.rating}}&nbsp;月售{{item.recent_order_num}}单</p>
                </div>
                <div class="shopCommity--item__two">
                  <p>{{item.delivery_mode.text}}</p>
                </div>
              </div>
              <div class="shopCommity__right--item shopMargin">
                <div class="shopCommity--item__one">
                  <span>￥{{item.float_minimum_order_amount}}起送 | {{item.piecewise_agent_fee.tips}}</span>
                </div>
                <div class="shopCommity--item__two">
                  <span>{{item.distance}} | {{item.order_lead_time}}</span>
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <App-footer></App-footer>
  </div>
</template>

<script>
import AppFooter from './AppFooter.vue'
import BScroll from 'better-scroll'
import {state, mutations} from '../store'

export default {
  name: 'Shopping',
  data () {
    return {
      imgSrc: [
        { src: require('../assets/icon/meishi.png'), name: '美食' },
        { src: require('../assets/icon/shangchao.png'), name: '商超便利' },
        { src: require('../assets/icon/shuiguo.png'), name: '水果' },
        { src: require('../assets/icon/yaopin.png'), name: '送药上门' },
        { src: require('../assets/icon/yinpin.png'), name: '甜品饮品' }
      ],
      layer: [
        { src: require('../assets/icon/图层1@3x.png'), name: '午餐' },
        { src: require('../assets/icon/图层2@3x.png'), name: '快餐便当' },
        { src: require('../assets/icon/图层3@3x.png'), name: '川湘菜' },
        { src: require('../assets/icon/图层4@3x.png'), name: '星选好店' },
        { src: require('../assets/icon/图层5@3x.png'), name: '跑腿代购' }
      ],
      commodityArr: [],
      scroller: null,
      imgShopUrl: 'https://elm.cangdu.org/img/'
    }
  },
  components: { AppFooter },
  methods: {
    shopSearch () {
      this.$router.push({ name: 'Search', query: { geohash: this.$route.query.geohash } })
    },
    sendMsgToHeader () {
      this.$bus.$emit('天王盖地虎', { msg: '今晚通宵敲代码' })
    },
    changeCount () {
      mutations.plus()
    }
  },
  computed: {
    getCount () {
      return state.count
    }
  },
  created () {
    this.$http.shopping({
      latitude: this.$route.query.latitude,
      longitude: this.$route.query.longitude,
      limit: 20
    }).then(res => {
      window.console.log(res.data)
      window.console.log(this.$route.query.geohash)
      this.commodityArr = res.data
    }).catch(err => {
      window.console.log(err)
    })
  },
  mounted () {
    this.scroller = new BScroll(this.$refs.wrapper, {
      scrollY: true,
      click: true,
      // 下拉刷新
      pullDownRefresh: {
        threshold: 50,
        stop: 20
      },
      // 上拉加载
      pullUpLoad: {
        threshold: 50
      }
    })
    this.scroller.on('pullingDown', () => {
      window.console.log('现在我们就要去取数据了')
      this.$http.shopping({
        latitude: this.$route.query.latitude,
        longitude: this.$route.query.longitude,
        limit: 30,
        offset: 5
      }).then(res => {
        // window.console.log('数据已经取回来了')
        this.commodityArr = res.data
        window.console.log(res.data)
        this.scroller.finishPullDown()
      }).catch(err => {
        window.console.log(err)
      })
    })
    this.scroller.on('pullingUp', () => {
      window.console.log('去后台取数据')
    })
  }
}
</script>

<style scoped lang="scss">
  *{
    margin: 0;
    padding: 0;
  }
  .shop{
    width: 100%;
    height: 100%;
    .shop-header{
      width: 100%;
      height: 190px;
      background-color: #0090ff;
      .shopAddress{
        width: 90%;
        height: 60px;
        margin: 0px auto;
        padding-top: 25px;
        display: flex;
        align-items: center;
        img{
          width: 35px;
        }
        span{
          font-size: 30px;
          color: #fff;
        }
      }
      .shopSearch{
        width: 100%;
        height: 104px;
        display: flex;
        align-items: center;
        justify-content: center;
        input{
          width: 90%;
          color: #999;
          padding: 15px 160px;
          box-sizing: border-box;
          font-size: 28px;
          border: none;
          outline: none;
          background-image: url('../assets/搜索.png');
          background-position: 120px center;
          background-repeat: no-repeat;
          background-size: 30px;
        }
      }
    }
    .shopBody{
      width: 100%;
      padding-top: 20px;
      margin-bottom: 100px;
      box-sizing: border-box;
      background-color: #fff;
      .shopOption{
        width: 100%;
        height: 320px;
        .shopOption__item{
          width: 90%;
          height: 160px;
          margin: 0px auto;
          display: flex;
          align-items: center;
          justify-content: space-around;
          .shopOption__img{
            width: 20%;
            height: 159px;
            padding-top: 18px;
            box-sizing: border-box;
            text-align: center;
            img{
              width: 95px;
            }
            p{
              font-size: 23px;
              color: #595959;
            }
          }
        }
      }
      .shopMeal{
        width: 90%;
        height: 222px;
        margin: 35px auto 0px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: #f5f5f5;
        .shopMeal__left{
          width: 60%;
          height: 222px;
          padding: 26px 30px;
          box-sizing: border-box;
          p:first-child{
            font-size: 33px;
            color: #333;
          }
          p:nth-child(2){
            font-size: 27px;
            color: #858585;
            margin-top: 15px;
          }
          p:nth-child(3){
            font-size: 25px;
            color: #af8260;
            margin-top: 22px;
          }
        }
        .shopMeal__right{
          width: 40%;
          height: 222px;
          display: flex;
          align-items: center;
          justify-content: center;
          img{
            width: 165px;
          }
        }
      }
      .shopRecommend{
        width: 100%;
        height: 105px;
        display: flex;
        align-items: center;
        justify-content: center;
        span{
          font-size: 20px;
          color: #999;
        }
        p{
          font-size: 31px;
        }
      }
      .shopScreen{
        width: 100%;
        height: 46px;
        display: flex;
        margin-bottom: 15px;
        align-items: center;
        justify-content: space-between;
        p{
          width: 25%;
          color: #999;
          font-size: 30px;
          text-align: center;
        }
      }
      .container{
        height: 950px;
        overflow: hidden;
        .shopCommodity{
          width: 90%;
          height: 195px;
          margin: 0px auto;
          border-bottom: 1px dashed #e4e4e4;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .shopCommodity__left{
            width: 22%;
            height: 130px;
            img{
              width: 130px;
            }
          }
          .shopCommodity__right{
            width: 76%;
            height: 130px;
            margin-left: 20px;
            .shopMargin{
              margin-top: 15px;
              .shopCommity--item__one{
                span{
                  font-size: 20px;
                  color: #999;
                }
                .month{
                  font-size: 22px;
                  color: #999;
                }
              }
            }
            .shopCommity__right--item{
              width: 100%;
              height: 37px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .shopCommity--item__one{
                display: flex;
                align-items: center;
                .shopCommodityBrand{
                  width: 65px;
                  height: 37px;
                  text-align: center;
                  font-size: 25px;
                  color: #825418;
                  background-color: #feec1f;
                  border-radius: 4px;
                }
                p{
                  width: 300px;
                  height: 37px;
                  overflow: hidden;
                  white-space:nowrap;
                  text-overflow:ellipsis;
                  font-weight: bold;
                  font-size: 30px;
                  color: #333;
                }
              }
              .shopCommity--item__two{
                span{
                  font-size: 16px;
                  color: #9a9a9a;
                }
                p{
                  width: 105px;
                  height: 35px;
                  text-align: center;
                  line-height: 35px;
                  background-color: #009aff;
                  border-radius: 4px;
                  color: #fff;
                  font-size: 23px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
